<template>
  <el-dialog 
    class="score-detail-dialog"
    :visible="visible"
    :title="isRead? '查看比分':'录入比分'"
    :before-close="handleClose">
    <div class="score-box clearfix">
      <div class="score-left">
        <ul class="score-table">
          <li>项目</li>
          <li>对阵双方</li>
          <li class="clearfix" v-bind:style="{height:sHeight +'px'}">
            <div class="fl every" v-bind:style="{lineHeight: sHeight +'px'}">
              每盘比分
            </div>
            <ul class="fl number">
              <li v-for="(item,index) in dish" :key="index"
                v-bind:style="{lineHeight: gameLength + 'px'}">
                {{index+1}}
              </li>
            </ul>
          </li>
          <li style="height:62px;">结果</li>
        </ul>
      </div>
      <div class="score-right">
        <ul class="score-table">
          <li class="match-type center">{{isRead? result.roundType :game.roundType}}</li>
          <li>
            <el-row class="player center">
              <el-col  :span="12" class="bordered">
                {{isRead ? result.hostUserName: host }}
              </el-col>
              <el-col :span="12">
                {{isRead ? result.guestUserName: guest}}
              </el-col>
            </el-row>
          </li>
          <li v-bind:style="{height:sHeight +'px'}">
            <template v-if="!isRead">
              <el-row class="small-score"
                v-for="(item,index) in scoreList" :key="index" 
                v-bind:style="{lineHeight: gameLength + 'px'}"
                v-bind:class="{borderb: index != (scoreList.length-1)}">
                <el-col :span="12" class="bordered">
                  <el-input :maxlength="2" :max="game.point" @blur="filterInput(item, 1)" class="score-detail-input" v-model="item.hostScore" />
                </el-col>
                <el-col :span="12">
                  <el-input :maxlength="2" :max="game.point" @blur="filterInput(item, 0)" class="score-detail-input" v-model="item.guestScore" />
                </el-col>
              </el-row>
            </template>
            <template v-else>
              <el-row class="small-score"
                v-for="(item,index) in result.scoreList" :key="index" 
                v-bind:style="{lineHeight: gameLength + 'px'}"
                v-bind:class="{borderb: index != (result.scoreList.length-1)}">
                <el-col :span="12" class="bordered">
                  {{item.hostScore}}
                </el-col>
                <el-col :span="12">
                  {{item.guestScore}}
                </el-col>
              </el-row>
            </template>
          </li>
          <li>
            <span class="big-score">
              {{isRead ? result.hostScore : hostScore}}:{{isRead? result.guestScore : guestScore}}
            </span>
          </li>
        </ul>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <template v-if="!isRead">
        <el-button @click="handleCancel()">取 消</el-button>
        <el-button type="primary" :disabled="!scoreRight" @click="scoreWrite()">确 定</el-button>
      </template>
      <template v-else>
        <el-button type="primary" @click="handleCancel()">确 定</el-button>
      </template>
    </span>         
  </el-dialog>
</template>

<script>
import {filterNum} from 'utils'
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    data: Object,
    host: String,
    guest: String,
    isRead: Boolean,
    result: Object
  },
  computed: {
    dish () {
      return this.isRead ? this.result.dish : this.game.dish
    },
    sHeight () {
      let h
      if (this.dish === 3) {
        h = 295
      } else if (this.dish === 5) {
        h = 299
      } else if (this.dish === 7) {
        h = 350
      }
      return h
    },
    gameLength () {
      let h
      if (this.dish === 3) {
        h = 97
      } else if (this.dish === 5) {
        h = 59
      } else if (this.dish === 7) {
        h = 49
      }
      return h
    },
    hostScore () {
      let hs = 0
      this.scoreList.forEach(g => {
        if (Number(g.hostScore) > Number(g.guestScore)) {
          hs++
        }
      })
      return hs
    },
    guestScore () {
      let hs = 0
      this.scoreList.forEach(g => {
        if (Number(g.hostScore) < Number(g.guestScore)) {
          hs++
        }
      })
      return hs
    },
    winDish () {
      return (this.game.dish + 1) / 2
    },
    everyNotEqual () {
      return this.scoreList.length && this.scoreList.every(item => {
        return (!item.hostScore.length && !item.guestScore.length) || ((item.hostScore.length && item.guestScore.length) && (item.hostScore !== item.guestScore))
      })
    },
    duoyu () { // 多余比赛
      let h = 0
      let g = 0
      let total = 0
      let flag = false
      for (let i = 0; i < this.game.dish; i++) {
        if (Number(this.scoreList[i].hostScore) > Number(this.scoreList[i].guestScore)) {
          h++
        }
        if (Number(this.scoreList[i].guestScore) > Number(this.scoreList[i].hostScore)) {
          g++
        }
        if (h >= this.winDish || g >= this.winDish) {
          total = i + 1
          break
        }
      }
      for (let j = total; j < this.game.dish; j++) {
        if (this.scoreList[j].hostScore || this.scoreList[j].guestScore) {
          flag = true
        }
      }
      return flag
    },
    scoreRight () {
      return this.hostScore === this.winDish || this.guestScore === this.winDish
    }
  },
  mounted () {
    if (!this.isRead) {
      this.initData()
    } else {
      this.fillGames()
    }
  },
  data () {
    let game = this.data
    return {
      game: game,
      scoreList: [],
      errMsg: '您录入的比分不符合规则'
    }
  },
  methods: {
    filterInput (item, isHost) {
      let re = /[^0-9]/
      if (isHost && re.test(item.hostScore)) {
        item.hostScore = filterNum(item.hostScore)
      }
      if (!isHost && re.test(item.guestScore)) {
        item.guestScore = filterNum(item.guestScore)
      }
    },
    initData () {
      for (let i = 0, len = this.game.dish; i < len; i++) {
        this.scoreList.push({
          hostScore: '',
          guestScore: ''
        })
      }
    },
    fillGames () {
      let len = this.result.dish - this.result.scoreList.length
      for (let i = 0; i < len; i++) {
        this.result.scoreList.push({
          hostScore: '/',
          guestScore: '/'
        })
      }
    },
    scoreWrite () {
      let ev = 1
      this.scoreList.forEach(item => {
        if (item.hostScore || item.guestScore) {
          if (!(item.hostScore >= this.game.point || item.guestScore >= this.game.point)) {
            ev = 0
          }
        }
      })
      if (!ev) {
        this.$message(this.errMsg)
      } else {
        if (this.duoyu || !this.everyNotEqual) {
          this.$message('您录入的比分不符合规则(存在多余无效比分录入)')
        } else {
          let score = {
            guestScore: this.guestScore,
            hostScore: this.hostScore,
            scoreGameVO: [],
            roundType: this.game.roundType
          }
          let list = []
          for (let i = 0, len = this.scoreList.length; i < len; i++) {
            if (this.scoreList[i].hostScore || this.scoreList[i].guestScore) {
              list.push({
                scoreSort: i + 1,
                hostScore: this.scoreList[i].hostScore,
                guestScore: this.scoreList[i].guestScore
              })
            }
          }
          score.scoreGameVO = list
          this.$emit('score', score)
        }
      }
    },
    handleCancel () {
      this.$emit('close')
    },
    handleClose () {
      if (this.visible) {
        this.$emit('update:visible', false) // 更新父组件的状态
        this.$emit('close')
      }
    }
  }
}
</script>

<style scoped lang="scss">
.score-left{
  li{
    text-align:center;
  }
}
.score-right{
  li{
    text-align:center;
  }
}
</style>
<style lang="scss">
@import '../../../styles/scoreDetail.scss';
.score-detail-dialog{
  .el-dialog{
    width:600px;
  }
}
</style>
